// 回调函数
ajax(url, () => {
    // 处理逻辑
})
// 回调地狱
ajax(url, () => {
    // 处理逻辑
    ajax(url, () => {
        // 处理逻辑
        ajax(url, () => {
            // 处理逻辑
        })
    })
})
// 把函数分开写
function firstAjax() {
    ajax(url1, () => {
        // 处理逻辑
        secondAjax()
    })
}
function secondAjax() {
    ajax(url2, () => {
        // 处理逻辑
    })
}
ajax(url, () => {
    // 处理逻辑
    firstAjax()
})

/**
 * 以上的代码虽然看上去利于阅读了，但是还是没有解决根本问题。
 * 回调地狱的根本问题就是：
 *    嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
 *    嵌套函数一多，就很难处理错误
 *
 */
function *foo(x) {
    let y = 2 * (yield (x + 1))
    console.log(x, y);
    let z = yield (y / 3)
    return (x + y + z)
}

let it = foo(5)
console.log(it); // {}
console.log(it.next()); // { value: 6, done: false }
// console.log(it.next()); // 5 NaN { value: NaN, done: false }
console.log(it.next(12)); // 5 24 { value: 8, done: false }
console.log(it.next(13)); // { value: 42, done: true }

/**
 * 首先，Generator 函数调用和普通函数不同，它会返回一个迭代器
 * 当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield(x+1) 处，所以返回 5 + 1 = 6
 * 当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参的话，yield 永远返回 undefined。此时 let y = 2 * 12，所以第二个 yield 等于 2 * 12 / 3 = 8
 * 当执行第三次 next 时，传入的参数会传递给 z, 所以 z = 13, x = 5, y = 24，相加等于 42
 */

// 可以通过 Generator 函数解决回调地狱的问题。
function *fetch () {
    yield ajax(url, () => {})
    yield ajax(url1, () => {})
    yield ajax(url2, () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()